<!DOCTYPE html>
<html>

<head>
    <title>环绿回收</title>
    <!--css-links-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <!--//css-links-->
    <!--meta-tags-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords"
          content="Simple Statistics Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />

    <style>
        .box {
            width:50px;
            text-align: right;
            line-height: 25px;
            display: inline;
            font-size: 8px;
            margin: 30px auto;
            padding: 12px;
            border: 1px solid black;
        }

        #cw,
        #cw1 {
            height: 20px;
        }
    </style>
</head>

<body>
<h1>环绿回收</h1>
<!-- main-section -->
<div class="head agile">
    <div class="logo">
        <div class="logo-top wel">
            <img src="img/login-icon.jpg" alt="image" />
            <h2>欢迎</h2>
        </div>
        <div class="logo-bottom w3layouts">
            <div class="sky-form">
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio" checked=""><i></i>Lorem ipsum dolor sit
                    amet</label>
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio"><i></i>Adipiscing elit sed do eiusmod</label>
                <label style="color:#00FF00;" class="radio"><input type="radio" name="radio"><i></i>Tempor incididunt ut labore</label>
            </div>
        </div>
    </div>
    <div class="login w3">
        <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                <ul class="resp-tabs-list">
                    <li class="resp-tab-item"><span>注册</span></li>

                </ul>
                <div class="resp-tabs-container">
                    <div class="tab-1 resp-tab-content">
                        <div class="login-top agileits">
                            <form action="#" method="post">
                                <div>
                                    <input type="text" class="name active" placeholder="手机号" required />
                                    <input type="text" class="pass1" placeholder="密码" required />
                                    <input type="text" class="pass2" placeholder="确认密码" required />
                                    <div id="cw"></div>
                                </div>
                                <div >
                                    <input style="width: 160px;height: 40px; display: inline;" type="id" class="email" placeholder="验证码" required/>
                                    <span class="box" >获取验证码 </span>
                                    <div id="cw3"></div>
                                </div>

                                <div class="bottom-w3l">
                                    <div class="submit sub1">
                                       <input type="submit" name="login" onclick="if(confirm('确定进入下一步，。！')){location.href='./register.html'}" value="下一步"/>
                                    </div>
                                    <div class="login-bottom agile">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<!-- //main-section -->
<!-- copyright -->
<div class="footer agile-w3l">
</div>
<!-- //copyright -->
<!--script-->
<script src="js/jquery.min.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default',
            width: 'auto',
            fit: true
        });
    });

</script>
<script>
    function checkPassword() {
        var value1 = document.getElementById("pass1").value;
        var value2 = document.getElementById("pass2").value;
        if (value1 == value2) {
            alert("你输入的两次密码一致.");
        }
        else {
            alert("你输入的两次密码不一致，请重新输入");
            document.getElementById("pass1").value = "";
            document.getElementById("pass2").value = "";
        }
    }
</script>
<!--script-->
<script>
    function countDown() {
        var box = document.getElementsByClassName('box')[0];
        var time = 60;
        var timer;
        box.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    box.innerHTML = '点击重新获取';
                    time = 60;
                } else {
                    time--;
                    box.innerHTML = time + '秒可获取';
                }
            }, 1000)
        }
    }
    countDown()
</script>
</body>

</html>
